<template>
  <div>



    <el-dialog class="abow_dialog"
      title="人员"
      width="90%"
      height="650px"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show">
      <div>


      </div>



      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getUser,getRoleTree,getRoleFilter,getDemension,getOrgTree,getOrgFilter,getOrgPost,getPostFilter} from "@/api/uc";

  export default {
    methods: {
      changePanelUser:function(page){
        this.queryForm.page=page;
       var val=  this.activePanel
        if (val=='users') {
          this.getUser();
        }else if(val=='role'){
          getRoleFilter(this.queryForm, this.activiteCode).then((response) => {
            if (response.code==0){
              if (response.code==0){
                this.tableData=response.page.aaData;
                this.userTotal=parseInt(response.page.total);
              }
            }
          })
        }else if(val=='org'){
          getOrgFilter(this.queryForm,this.activiteCode).then((response) => {
            if (response.code==0){
                this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          })

        }else if(val=='position'){
          getPostFilter(this.queryForm,this.activiteCode).then((response) => {
            if (response.code==0){
              if (response.code==0){
                this.tableData=response.page.aaData;
                this.userTotal=parseInt(response.page.total);
              }
            }
          })
        }
      },
      orgDemensionChange:function(data){
        this.getOrgTree(data)
      },
      handleRoleNodeClick:function (data) {
        if (data){
          this.activiteCode=data.code;
        }
        getRoleFilter(this.queryForm,data.code).then((response) => {
          if (response.code==0){
            if (response.code==0){
              this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          }
        })
      },
      handleOrgNodeClick:function (data) {
        this.activiteCode=data.deptCode;
        getOrgFilter(this.queryForm,data.deptCode).then((response) => {
          if (response.code==0){
            if (response.code==0){
              this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          }
        })
      },
      handlePositionNodeClick:function (data) {
        this.activiteCode=data.code;
        getPostFilter(this.queryForm,data.code).then((response) => {
          if (response.code==0){
            if (response.code==0){
              this.tableData=response.page.aaData;
              this.userTotal=parseInt(response.page.total);
            }
          }
        })
      },
      getUser:function(){
        getUser(this.queryForm).then((response) => {
          if (response.code==0){

            this.tableData=response.page.aaData;
            this.userTotal=parseInt(response.page.total);
          }
        })
      },
      getOrgPost:function(){
        getOrgPost(this.queryForm).then((response) => {
          if (response.code==0){
            this.positionDemension=response.data;
          }
        })
      },
      getDemension:function(){
        getDemension(this.queryForm).then((response) => {
          if (response.code==0){
            this.orgDemension=response.data;
            for (var i = 0; i <this.orgDemension.length ; i++) {
              if (this.orgDemension[i].defaultVal){
                this.orgModel=this.orgDemension[i].code;
                this.getOrgTree(this.orgDemension[i].code)
                break
              }
            }
          }



        })
      },
      getRoleTree:function(){
        getRoleTree(this.queryForm).then((response) => {
          if (response.code==0){
            this.roleData=response.data;
          }
        })
      },
      getOrgTree:function(code){
        getOrgTree(code).then((response) => {
          if (response.code==0){
            var tmp=[];
            tmp.push(response.data)
           this.orgData=tmp;
          }
        })
      },
      mount() {
        this.getUser();
      },
      created() {
        this.getUser();
      },
      changePanel:function (data) {
        if (data.length>0){
          var val=data[0];
          this.activePanel=val
          this.queryForm.page=1
          if (val=='users') {
            //分页初始化为第一页
            this.$nextTick(function(){

              this.$refs['pages'].currentPage = 1;

            })
            this.getUser();
          }else if(val=='role'){
            this.getRoleTree();
          }else if(val=='org'){
            this.getDemension()

          }else if(val=='position'){
            this.getOrgPost()
          }
        }
      }
    },
    data () {
      return {
        visible: this.show,
        roleDefaultProps:{
          children: 'childList',
          label: 'name'
        },
        orgDefaultProps:{
          children: 'children',
          label: 'deptName'
        },
        positionDefaultProps:{
          children: 'children',
          label: 'posName'
        },
        activiteCode:"",
        serviceVal:'',
        activePanel:'',
        tableHeight:550,
        userTotal:0,
        currentChoose:'',
        orgModel:'',
        positionModel:'',
        roleData:[],
        orgData:[],
        positionDemension:[],
        orgDemension:[],
        queryForm: {
          page: 1,
          length: 10,
        },
        showTableColumns:[
          {
            title: '用户名',
            key: 'fullname'
          },
          {
            title: '操作',
            key: 'operate'
          },
        ],

        tableColumns:[
          {
            title: '',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.id;
              let rowData = params.row;
              let flag = false;
              if (this.currentChoose === id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      var showData=[];
                      showData.push(rowData);
                      this.showTableData=showData;
                      self.currentChoose = id;
                    }
                  }
                })
              ])
            }
          },
          {
            title: '工号',
            key: 'userNo'
          },
          {
            title: '用户名',
            key: 'fullname'
          },
          {
            title: '手机号',
            key: 'mobile'
          }
        ],
        tableData:[],
        showTableData:[],
      };
    },
    mount() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      show () {
        //分页初始化为第一页
        this.$nextTick(function(){
          this.$refs['pages'].currentPage = 1;
        })
        if (this.show){
          this.activePanel="users"
          this.getUser();
          //分页初始化为第一页
          this.$nextTick(function(){

            this.$refs['pages'].currentPage = 1;

          })
        }else{
          this.activePanel="";
        }

        this.visible = this.show;
      }
    }
  };
</script>
<style lang="scss">
  .split-pane{
    border: 1px solid #dcdee2;
  }
  .abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
      margin: 0 auto !important;
      height: 90%;
      overflow: hidden;
      .el-dialog__body {
        position: absolute;
        left: 0;
        top: 54px;
        bottom: 0;
        right: 0;
        padding: 0;
        z-index: 1;
        overflow: hidden;
        overflow-y: auto;
      }
    }
  }

  .cus-dialog-container{
    .el-dialog__footer{
      margin: 0 20px;
      // border: 1px solid red;
      padding: 15px 0 16px;
      text-align: center;
      /*position: relative;*/

      .dialog-footer{
        // display: block;

        .circular{
          // display: inline-block;
          vertical-align: middle;
          margin-right: 5px;
          width: 24px;
          height: 24px;
        }

        .el-loading-text{
          // display: inline-block;
          vertical-align: middle;
        }

        .el-loading-spinner{
          margin-top: -12px;
        }
      }
    }
    .el-dialog__body{
      // border: 1px solid blue;
      overflow: hidden;
    }
    .el-dialog__header{
      padding: 40px 0px 0px 40px;
      font-weight: 900;
      //margin:;
    }
  }
</style>
